<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光线</title>
    <style>
        body{
            background-color:rgba(0,0,0,.9);
            color: blanchedalmond;
        }
        .nav-main {
            z-index: 10;
            display: flex;
            top: 20px;
            position: fixed;
            width: 100%;
            min-width: 1024px;
        }
        .empty-line{
            width: 50px;
            display: inline-block;
        }
        .logo-title {
            padding: 0px 10px;
            font-size: 32px;
        }
        .notify-info{
            flex-grow: 1;
        }
        .right-info{
            display: flex;
            width: 200px;
            justify-content: space-between;
            padding-right: 20px;
        }
        .lg-box{
            position: fixed;
            height: 35px;
            top: 45px;
            left: 0px;
            right: 0px;
        }
        .lg-start{
            width: 30px;
            height: 1px;
            border-top: 1px solid;
            border-image: linear-gradient(90deg, rgba(37,89,252,0.15) 0%,rgba(37,89,252,0.15) 6%,rgba(37,89,252,1) 100%) 1.564537157757496 1.564537157757496;
            overflow: hidden;
            border-top-right-radius: 1px;
        }

        .lg-start::before{
            content: '';
            display: block;
            background: #2559fc;
            background: linear-gradient(to left, #fdeff9, #ec38bc, #2559fc); 
            height: 1px;
            animation: 10s ease-in 0s lg-start-animation infinite;
            opacity: 0;
        }
        @keyframes lg-start-animation {
            from {
                opacity: 1;
                transform: translateX(-31px);
            }
            to {
                transform: translateX(1629px);
            }
        }
        .lg-block1{
            overflow: hidden;
            position: absolute;
            left: 25px;
            top: 10px;
            width: 30px;
            height: 1px;
            border-top: 1px solid rgba(37,89,252,1);
            transform: rotate(45deg);
            border-top-left-radius: 1px;
        }
        .lg-block1::before{
            content: '';
            display: block;
            background: #03001e;
            background: linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e); 
            height: 1px;
            animation: 10s ease-in 1s lg-block1-animation infinite;
            opacity: 0;
        }
        @keyframes lg-block1-animation {
            from {
                opacity: 1;
                transform: translateX(-31px);
            }
            to {
                transform: translateX(1629px);
            }
        }
        .lg-bottom{
            overflow: hidden;
            position: absolute;
            left: 51px;
            top: 21px;
            width: 90px;
            height: 1px;
            border-top: 1px solid #2559fc;
        }
        .lg-bottom::before{
            content: '';
            display: block;
            background: #2559fc;
            background: linear-gradient(to left, #fdeff9, #ec38bc, #2559fc); 
            height: 1px;
            animation: 10s ease-in 2s lg-bottom-animation infinite;
            opacity: 0;
        }
        @keyframes lg-bottom-animation {
            from {
                opacity: 1;
                transform: translateX(-91px);
            }
            to {
                transform: translateX(1629px);
            }
        }
        .lg-block2{
            overflow: hidden;
            position: absolute;
            left: 150px;
            top: -2px;
            width: 1px;
            height: 28px;
            border-left: 1px solid rgba(37,89,252,1);
            transform: rotate(45deg);
        }
        .lg-block2::before{
            content: '';
            display: block;
            background: #2559fc;
            background: linear-gradient(to bottom, #fdeff9, #ec38bc, #2559fc); 
            width: 1px;
            height: 28px;
            animation: 10s ease-in 3s lg-block2-animation infinite;
            opacity: 0;
        }

        @keyframes lg-block2-animation {
            from {
                opacity: 1;
                transform: translateY(51px);
            }
            to {
                transform: translateY(-1629px);
               
            }
        }
        .lg-end{
            overflow: hidden;
            position: absolute;
            left: 160px;
            right: 0px;
            top: 1px;
            height: 1px;
            border-top: 1px solid rgba(37,89,252,1);
            border-top-left-radius: 1px;
        }
        .lg-end::before{
            content: '';
            display: block;
            width: 322px;
            background: #2559fc;  /* fallback for old browsers */
            background: -webkit-linear-gradient(to left, #fdeff9, #ec38bc, #2559fc);  /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left, #fdeff9, #ec38bc, #2559fc); 
            height: 2px;
            animation: 10s ease-in 4s lg-end-animation infinite;
            opacity: 0;
        }
        @keyframes lg-end-animation {
            from {
                transform: translateX(-322px);
                opacity: 1;
            }
            to {
                transform: translateX(1629px);
            }
        }
    </style>
</head>
<body>
    <div class="nav-main">
        <span class="empty-line"></span>
        <div class="logo-title">莫奈</div>
        <span class="empty-line"></span>
        <div class="notify-info">
            莫奈公告：MONET, THE WORLD'S BEST LOW CODE VISUALIZATION PLATFORM
        </div>
        <div class="right-info">
            <div class="group-space">BYMD的默认空间</div>
            <div class="user-name">BYMD</div>
        </div>
        <div class="lg-box">
            <div class="lg-start"></div>
            <div class="lg-block1"></div>
            <div class="lg-bottom"></div>
            <div class="lg-block2"></div>
            <div class="lg-end"></div>
        </div>
    </div>
    <script>
        
    </script>
</body>
</html>